Day 10 -主頁中使用 Card 元件

2024 iThome 鐵人賽

DAY 9

佛心分享-IT 人自學之術

使用 AnalogJS 建立部落格文章系列第 10 篇

16th鐵人賽 analogjs

connieleung

2024-09-25 07:28:48

341 瀏覽

分享至

目標：主頁中使用 Card 元件

首先，我必須將 CardComponent 匯入到 HomeComponent。然後，我修改範本，將 "Current Tech STack" 和 "Areas Of Interest" 部分替換為 CardComponent。段落元素和無序列表會根據屬性名稱投影到不同的 ng-content。

導入 Card 元件

將 CardComponent 導入 imports 中。

import { RouteMeta } from '@analogjs/router';
import { Component } from '@angular/core';
import { CardComponent } from '../components/card.component';

@Component({
  selector: 'app-home',
  standalone: true,
  imports: [CardComponent],
  template: `
    <section class="flex justify-evenly">
        <blog-card>
            <p header class="text-xl underline">Current Technical Stack<p>
            <ul class="text-left list-disc p-5">
                <li>Angular</li>
                <li>Vue (Composition API)</li>
                <li>NestJS</li>
                <li>JavaScript</li>
                <li>HTMX</li>
                <li>PostgreSQL</li>
            </ul>
        </blog-card>
        <blog-card>
            <p header class="text-xl underline">Areas of Interest<p>
            <ul class="text-left list-disc p-5">
                <li>Angular Architecture</li>
                <li>REST API</li>
                <li>Generative AI</li>
            </ul>
        </blog-card>
        <blog-card>
            <p header class="text-xl underline">Hobbies<p>
            <ul class="text-left list-disc p-5">
                <li>Learn Foreign Language</li>
                <li>Learn Tech</li>
                <li>Exercise</li>
            </ul>
        </blog-card>
    </section>
  `,
})
export default class HomeComponent {}

在 HomeComponent 元件中，範本使用 <blog-card> 將元素投影到 NgContent。

<blog-card>
     <p header class="text-xl underline">Current Technical Stack<p>
      <ul class="text-left list-disc p-5">
            <li>Angular</li>
            <li>Vue (Composition API)</li>
            <li>NestJS</li>
            <li>JavaScript</li>
            <li>HTMX</li>
            <li>PostgreSQL</li>
       </ul>
</blog-card>

該卡片顯示了我目前的技術堆疊。

<blog-card>
       <p header class="text-xl underline">Areas of Interest<p>
       <ul class="text-left list-disc p-5">
            <li>Angular Architecture</li>
            <li>REST API</li>
            <li>Generative AI</li>
       </ul>
 </blog-card>

該卡片顯示感興趣的領域。

<blog-card>
     <p header class="text-xl underline">Hobbies<p>
     <ul class="text-left list-disc p-5">
           <li>Learn Foreign Language</li>
           <li>Learn Tech</li>
           <li>Exercise</li>
     </ul>
</blog-card>

這張卡片顯示了我的愛好，即學習口語、技術和運動。

導航至 http://localhost:5173。該應用程式顯示主頁的新設計。

Github Repo: